How to Scroll to the Bottom of the Page in a Vue App |
您所在的位置：网站首页 › automatically scroll to bottom of page › How to Scroll to the Bottom of the Page in a Vue App |
|
We can use the vue-scrollto package to scroll down to the bottom of a page. First, we install it by running: npm install --save vue-scrolltoNext, we register it in main.js: import Vue from "vue"; import App from "./App.vue"; const VueScrollTo = require("vue-scrollto"); Vue.use(VueScrollTo); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");We called the Vue.use method to register it. Then in App.vue, we write: scroll to bottom {{n}} export default { name: "App", data() { return { nums: Array(100) .fill() .map((_, i) => i) }; } };In the code above, we created the nums array with the Array constructor, fill and map methods. Then in the template, we have an a element that scrolls to the element at the bottom of the page with the v-scroll-to prop’s value. We set its value to the ID of the div at the bottom of the page. Then below it, we have 100 divs with the id prop that’s dynamically set to the ID num and the value of n. Now, when we click on the a element, then it’ll scroll to the bottom of the page because the ID is set to the ID of the div at the bottom of the page. |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |